import React, {PureComponent} from 'react'
import echarts from 'echarts';
import baseChart from '../chart/base-chart'
import {setTitle, scale, tooltip, baseTextStyle} from '../chart/util/common'
import {connect} from 'react-redux'

class Bar extends PureComponent {
    shouldComponentUpdate(nextProps) {
        return nextProps.exceptionCycle !== this.props.exceptionCycle
    }

    renderDate = (data) => {
        const exceptionCycle = data.toJS()
        return {
            xAxis: {
                data: ['1天', '2天', '3天', '4天', '5天', '5天以上']
            },
            legend: {
                data: Object.keys(exceptionCycle),
            },
            series:  Object.keys(exceptionCycle).map(key => {
                return {
                    name: key,
                    type: 'bar',
                    barWidth: 30 * scale,
                    stack: '已关闭问题处理周期分布',
                    data: exceptionCycle[key].periods
                }
            })
        }
    }


    componentWillUpdate(nextProps) {
        const {exceptionCycle} = nextProps
        const data = this.renderDate(exceptionCycle)
        this.myChart.setOption(data);

    }


    componentDidMount() {
        const {setChartInstance, exceptionCycle} = this.props
        const data = this.renderDate(exceptionCycle)
        this.myChart = setChartInstance(echarts.init(this.refs.bar));
        const xData = function () {
            const data = [];
            for (let i = 1; i < 8; i++) {
                data.push(i + "号");
            }
            return data;
        }();

        const option = {
            "tooltip": {
                ...tooltip,
                "trigger": "axis",
                "axisPointer": {
                    "type": "shadow"
                },
            },
            title: {
                ...setTitle({text: '已关闭问题处理周期分布'}),
                textStyle: {
                    color: '#5BE2EF',
                    fontSize: 14 * scale,
                    fontWeight: 'bolder'
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                top: 38 * scale,
                bottom: 34 * scale,
                containLabel: true
            },
            legend: {
                data: [],
                bottom: 10 * scale,
                itemWidth: 25 * scale,
                itemHeight: 12 * scale,
                textStyle: {
                    color: '#fff',
                    fontSize: 12 * scale
                }

            },
            "calculable": true,
            "xAxis": [
                {
                    "type": "category",
                    "axisLine": {
                        lineStyle: {
                            color: 'rgba(255,255,255,.3)',
                            width: scale
                        }
                    },
                    "splitLine": {
                        "show": false,
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitArea": {
                        "show": false
                    },
                    "axisLabel": {
                        "interval": 0,
                        // "rotate": 45,
                        "show": true,
                        "splitNumber": 15,
                        "textStyle": {
                            fontFamily: "微软雅黑",
                            fontSize: 12 * scale,
                            color: '#fff'
                        }
                    },
                    "data": [],
                }
            ],
            "yAxis": [
                {
                    "type": "value",
                    "splitLine": {
                        "show": true,
                        lineStyle: {
                            color: 'rgba(255,255,255,.3)',
                            width: scale
                        }
                    },
                    "axisLine": {
                        "show": true,
                        lineStyle: {
                            color: 'rgba(255,255,255,.3)',
                            width: scale
                        }
                    },
                    "axisLabel": {
                        "interval": 0,
                        // "rotate": 45,
                        "show": true,
                        "splitNumber": 15,
                        "textStyle": {
                            fontFamily: "微软雅黑",
                            fontSize: 12 * scale,
                            color: '#fff'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    "splitArea": {
                        "show": false
                    }
                }
            ],
            "series": []
        }
        this.myChart.setOption(option);
        this.myChart.setOption(data);

    }

    render() {
        return (
            <div style={{width: '100%', height: '100%'}} ref='bar'/>
        )
    }

}


function mapStoreToProps({exceptionCycle}) {
    return {
        exceptionCycle
    }
}

export default baseChart(connect(mapStoreToProps)(Bar))